<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="Search-box">
                    <el-form ref="formRef" :model="formItemData" :inline="true" class="demo-ruleForm">
                        <el-form-item porp="order_no">
                            <el-input v-model="formItemData.order_no" type="text" autocomplete="off" placeholder="输入订单号"
                                style="width: 300px;" />
                        </el-form-item>
                        <el-form-item>
                            <el-button class="btnStyle" @click="SearchWeightLogClick">查询</el-button>
                            <el-button class="btnStyle" @click="cancelData()">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table-box">
                    <el-table v-loading="loading" element-loading-text="加载数据..." :data="weightLog"
                        style="width: 100%;height: 100%;"
                        :header-cell-style="{ background: '#3CB731', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }"
                        size="small">
                        <template #empty>
                            <el-empty description="暂无数据！" />
                        </template>
                        <el-table-column prop="order_no" label="订单号" align="center" width="300" fixed />
                        <el-table-column prop="created_at" label="变化时间" align="center" width="240" />
                        <el-table-column prop="lock_id" label="门锁" align="center" width="120">
                            <template #default="{ row }">
                                <el-tag v-if="row.lock_id != 0">
                                    {{ row.lock_id }} 号门
                                </el-tag>
                                <el-tag v-if="row.lock_id == 0">
                                    所有门
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="device" label="设备" align="center" width="300">
                            <template #default="{ row }">
                                <div>
                                    <div v-if="row.device.name === null">设备名称：{{ }}</div>
                                    <div v-if="row.device.name !== null">设备名称：{{ row.device.name }}</div>
                                    <div>设备编码：{{ row.device.imei }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="admin_user.account" label="用户名/管理员" align="center" min-width="200">
                            <template #default="{ row }">
                                <div v-if="row.admin_user_id">管理员：{{ row.admin_user.account }}</div>
                                <div v-if="row.user_id"> 用户：{{ row.user.nickname }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" align="center" width="100">
                            <template #default="{ row }">
                                <el-tag v-if="row.admin_user_id" type="success">补货 </el-tag>
                                <el-tag v-if="row.user_id">购物</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型" align="center" width="160">
                            <template #default="{ row }">
                                <el-tag v-if="row.type == 1" type="success">补货开门重量</el-tag>
                                <el-tag v-if="row.type == 2" type="warning">补货关门重量</el-tag>
                                <el-tag v-if="row.type == 3">购物开门重量</el-tag>
                                <el-tag v-if="row.type == 4" type="info">购物关门重量</el-tag>
                                <el-tag v-if="row.type == 5" type="info">设备上报信息</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="weights" label="重量" min-width="200" align="center" fixed="right">
                            <template #default="{ row }">
                                <div v-if="row.lock_id == 1">
                                    <div v-for="( it, index ) in  row.weights " :key="index">
                                        <span class="boldText">{{ index + 1 }}</span>&nbsp;层 : {{ it }}
                                    </div>
                                </div>
                                <div v-if="row.lock_id == 2">
                                    <div v-for="( it, index ) in  row.weights " :key="index">
                                        <span class="boldText">{{ (index + 5) + 1 }} </span>&nbsp;层 : {{ it }}
                                    </div>
                                </div>
                                <div v-if="row.lock_id == 0">
                                    <div v-for="( it, index ) in  row.weights " :key="index">
                                        <span class="boldText">{{ index + 1 }}</span>&nbsp; 层 : {{ it }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { WeightLog } from '@/api/Device'
import _ from 'lodash'

const route = useRoute()
const routes = ref()
const weightLog = ref([])
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)
const formItemData = reactive({
    order_no: '',
    limit: '',
    page: ''
})
const formRef = ref()
const loading = ref(true)

onMounted(() => {
    routes.value = route.matched
    getWeightLog()
})
const getWeightLog = async () => {
    const log = await WeightLog(formItemData).then(res => {
        loading.value = false
        const { code, data } = res
        if (code == 200) {
            var deep = _.cloneDeep(data.data);
            let values = Object.values(deep)
            weightLog.value = values.map(item => {
                let weight = null
                let device = ''
                if (item.weights.length <= 5) {
                    weight = item.weights.reverse()
                } else {
                    weight = item.weights
                }
                if (item.device !== null) {
                    device = item.device
                } else {
                    device = ''
                }
                return {
                    admin_user: item.admin_user,
                    admin_user_id: item.admin_user_id,
                    created_at: item.created_at,
                    device: device,
                    device_id: item.device_id,
                    id: item.id,
                    lock_id: item.lock_id,
                    order_no: item.order_no,
                    type: item.type,
                    user: item.user,
                    user_id: item.user_id,
                    weights: weight,
                }
            })
            total.value = data.total
        }

    }).catch((err) => {
        loading.value = false
    })
}
//搜索查询
const SearchWeightLogClick = () => {
    getWeightLog()
}

const handleSizeChange = (page) => {
    formItemData.limit = page
    getWeightLog()
}
const handleCurrentChange = (current) => {
    formItemData.page = current
    getWeightLog()
}
//重置表单
const cancelData = () => {
    formItemData.order_no = ''
    formItemData.userId = ''
    getWeightLog()

}
</script>

<style lang="less" scoped>
.table-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.Search-box {
    padding: 0;
}

.weightsTag {
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo-pagination-block {
    margin-top: 10px;
}

.boldText {
    font-weight: bold;
    font-size: 14px;
}

:deep(.el-button) {
    padding: 2px 10px;
    font-size: 12px;
    letter-spacing: 2px;
}
</style>
